<template>
  <div id="app">
    <div class="side-bar">
      <button class="side-button el-icon-news" @click="addComponent('ContentVm')">第一</button>
      <button class="side-button el-icon-news" @click="addComponent('ImgVm')">第二</button>
      <button class="side-button el-icon-news" @click="addComponent('TitleVm')">第三</button>
      <button class="side-button el-icon-news" @click="addComponent('ContentTextVm')">第四</button>
      <button class="side-button el-icon-caret-top"></button>
    </div>
    <nav>
      <button class="nav-button-bar" v-for="(item,index) in componentList" :key="index" @click="setData(item)" @keyup.right="deleteComponent(index)">{{item}}
        <i class="icon-color el-icon-close" @click="deleteComponent(index)" ></i></button>
    </nav>
    <div>
      <keep-alive>
        <component :is="currentComponent"></component>
      </keep-alive>
    </div>
  </div>
</template>
<script>
  import ContentVm from './components/ContentVm';
  import ImgVm from './components/ImgVm';
  import TitleVm from './components/TitleVm';
  import ContentTextVm from './components/ContentTextVm';
  import DefaultVm from './components/DefaultVm';

  export default {
    name: 'App',
    data: function () {
      return {
        radio: '1',
        currentComponent: DefaultVm,
        componentList: []
      }
    },
    components: {
      ContentVm,
      ImgVm,
      TitleVm,
      ContentTextVm,
      DefaultVm
    },
    methods: {
      setData(componentName) {
        this.currentComponent = componentName;
      },
      addComponent(name) {
        if(this.componentList.indexOf(name) === -1){
          this.componentList.push(name);
        }
        this.currentComponent = name;
      },
      deleteComponent(index) {
        this.componentList.splice(index, 1);
        console.log("this array length:"+ this.componentList.length);
        if(this.componentList.length === 0){
          this.currentComponent = DefaultVm;
        }
      }
    }

  }
</script>

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .header, #app, .body, .body-left, .body-right, .default-view, .right-view {
    border: 1px red dashed;
    margin: 5px;
  }

  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    /*margin-top: 60px;*/
    width: 1080px;
    margin: 0 auto;

  }

  .header {
    height: 50px;
  }

  .body-left, .body-right {
    float: left;
    height: 500px;
    width: 500px;
  }

  .default-view, .right-view {
    height: 420px;
  }

  .icon-color {
    color: #42b983;
    font-weight: bolder;
  }

  .icon-color:hover {
    color: red;
    transform: rotate(50deg);
  }

  .side-bar {
    background-color: #606266;
    width: 70px;
    height: 200px;
    position: fixed;
    top: 50px;
    left: 70px;
  }

  .side-button {
    display: block;
    margin: 5px;
  }

  .nav-button-bar {
    height: 30px;
    margin: 0 5px;
  }
</style>
